<template>
  <a-select
    v-bind="$attrs"
    show-search
    :placeholder="placeholder"
    v-model="currentValue"
    style="width: 100%"
    allow-clear
    @focus="loadData"
    @change="handleChange"
  >
    <a-select-option v-for="item in storeList" :key="item.store_code" >
      {{ item.store_name }}
    </a-select-option>
  </a-select>
</template>

<script>
import { fetchMerchantStorePutList } from '@/api/meta'
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      currentValue: null,
      storeList: []
    }
  },
  watch: {
    value (newValue, oldValue) {
      // eslint-disable-next-line eqeqeq
      if (newValue != oldValue) {
        this.currentValue = newValue
      }
    }
  },
  mounted () {
    this.loadData()
  },
  methods: {
    loadData () {
      fetchMerchantStorePutList({ page_size: 99999 }).then((result) => {
        this.storeList = result.data.infos
        this.currentValue = this.value
        console.log(this, 'fetchMerchantStorePutList')
      })
    },
    handleChange (value) {
      this.$emit('input', value)
    }
  },
  components: {}
}
</script>

<style></style>
